<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="12">
            <a-form-model-item :label="$t('排序序号')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sort">
              <a-input-number v-model="model.sort" :placeholder="$t('请输入排序序号')" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('商品编码')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="code">
              <a-input v-model="model.code" :placeholder="$t('请输入商品编码')"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('商品名称')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" :placeholder="$t('请输入商品名称')"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('商品分类')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="kind">
  	          <j-tree-select
                ref="treeSelect"
                :placeholder="$t('请选择商品分类')"
                v-model="model.kind"
                dict="bis_goods_kind,name,id"
                pidValue="0"
                >
              </j-tree-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('商品渠道')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="species">
              <j-dict-select-tag type="list" v-model="model.species" dictCode="bis_goods_infor.species" :placeholder="$t('请选择商品渠道')" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('供应商')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplier">
              <j-dict-select-tag type="list" v-model="model.supplier" dictCode="bis_goods_supplier,name,id" :placeholder="$t('请选择供应商')" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('单位')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="unit">
              <j-dict-select-tag type="list" v-model="model.unit" dictCode="bis_goods_unit,name,id" :placeholder="$t('请选择单位')" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('规格')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="standard">
              <a-input v-model="model.standard" :placeholder="$t('请输入规格')"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('上架状态')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="state">
              <j-switch v-model="model.state"  ></j-switch>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('参考成本')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cost">
              <a-input-number v-model="model.cost" :placeholder="$t('请输入参考成本')" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('原价')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="price">
              <a-input-number v-model="model.price" :placeholder="$t('请输入原价')" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('现价')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="newPrice">
              <a-input-number v-model="model.newPrice" :placeholder="$t('请输入现价')" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('图片')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="picture">
              <j-image-upload isMultiple  v-model="model.picture" ></j-image-upload>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('商品简介')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="comment">
              <a-textarea v-model="model.comment" rows="4" :placeholder="$t('请输入商品简介')" />
            </a-form-model-item>
          </a-col>
          <a-col :span="20">
            <a-form-model-item :label="$t('商品详情')" :labelCol=" { span: 3 }" :wrapperCol="{ span: 21 }" prop="details">
              <j-editor v-model="model.details" />
            </a-form-model-item>
          </a-col>
          <a-col :span="17">
            <a-form-model-item :label="$t('配送/核销方式')" :labelCol=" { span: 6}" :wrapperCol="{ span: 16 }" prop="verifyType">
              <j-dict-select-tag type="list" v-model="model.verifyType" dictCode="bis_goods_infor.verify_type" :placeholder="$t('请选择配送/核销方式')" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction } from '@/api/manage'
  import JEditor from '@/components/jeecg/JEditor'

  export default {
    name: 'BisGoodsInforForm',
    components: {
      JEditor
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
          sort:1,
          species:"0",
          state:"Y",
          verifyType:"0",
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
           sort: [
              { required: true, message: this.$t('请输入排序序号')},
           ],
           code: [
              { required: true, message: this.$t('请输入商品编码')},
           ],
           name: [
              { required: true, message: this.$t('请输入商品名称')},
           ],
           kind: [
              { required: true, message: this.$t('请输入商品分类')},
           ],
           species: [
              { required: true, message: this.$t('请输入商品渠道')},
           ],
           supplier: [
              { required: true, message: this.$t('请输入供应商')},
           ],
           state: [
              { required: true, message: this.$t('请输入上架状态')},
           ],
           cost: [
              { required: true, message: this.$t('请输入参考成本')},
           ],
           price: [
              { required: true, message: this.$t('请输入原价')},
           ],
           newPrice: [
              { required: true, message: this.$t('请输入现价')},
           ],
           picture: [
              { required: true, message: this.$t('请输入图片')},
           ],
           verifyType: [
              { required: true, message: this.$t('请输入配送/核销方式')},
           ],
        },
        url: {
          add: "/Goods/bisGoodsInfor/add",
          edit: "/Goods/bisGoodsInfor/edit",
          queryById: "/Goods/bisGoodsInfor/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        let that = this;
        // 触发表单验证
        that.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!that.model.id){
              httpurl+=that.url.add;
              method = 'post';
            }else{
              httpurl+=that.url.edit;
               method = 'put';
            }
            httpAction(httpurl,that.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
        })
      },
    }
  }
</script>